<template>
<van-popup class="more-increment-service" position="right" :overlay="false" v-model="showMoreIncrementService">
  <van-nav-bar title="增值服务" left-arrow @click-left="closeMoreIncementService" @click-right="openIncrementService" left-text="返回">
     <van-icon name="question" slot="right" />
  </van-nav-bar>
  <van-cell-group class="content">
    <van-cell title="+3币" value="开放买入当天可结算,期间可以取出" label="历史每日收益" />
    <van-cell title="+5币" value="开放买入当月可结算,期间不可以取出" label="历史每月收益" />
    <van-cell title="+7币" value="开放买入当年可结算,期间不可以取出" label="历史每年收益" />
    <!-- <van-cell title="+11币" value="开放买入当年可结算,期间不可以取出" label="历史年收益" /> -->
  </van-cell-group>
  <!-- 增值服务说明 -->
  <increment-service-panel :showIncrementService="showIncrementService" @closeIncrementService="closeIncrementService"></increment-service-panel>
</van-popup>
</template>

<script>
export default {
  props: ['showMoreIncrementService'],
  data () {
    return {
      showIncrementService: false // 是否显示增值服务说明
    }
  },
  methods: {
    // 关闭更多增值服务面板
    closeMoreIncementService() {
      this.$emit('closeMoreIncementService')
    },
    // 打开增值服务说明面板
    openIncrementService () {
      this.showIncrementService = true
    },
    // 关闭增值服务说明面板
    closeIncrementService () {
      this.showIncrementService = false
    },
  }
}
</script>

<style lang="scss">
@import '../../assets/styles/common.scss';
.more-increment-service{
  width: 100%;
  height: 100%;
  overflow-y: scroll;
  background-color: #f2f2f2;
}
</style>
